<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="css/datedropper.css">
	<link rel="stylesheet" type="text/css" href="css/timedropper.min.css">
   <link rel="stylesheet" href="css/top.css">
   <link rel="stylesheet" href="css/foot.css">
   <link rel="stylesheet" type="text/css" href="css/CSSreset.min.css" />
   <link rel="stylesheet" type="text/css" media="screen" href="css/als_demo.css" />
    <title>订单确认</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{ color:#949494; font-size:14px; padding-left:10px;}
        input::-ms-input-placeholder{text-align: center;}
        .header{ text-align: center; background-color: #F06673; color: aliceblue; width: 100%; height: 40px; line-height: 40px;}
		.h-left{float:left;width:15%; height:40px;}
        .h-left a{ display:block; width:45px; height:40px; margin:auto; background: url(images/common/splb_icon_back.png) no-repeat 15px center; background-size: auto 16px; }
		.h-mid { width:70%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#FFF; font-size:12px;}
		.info{padding:3%; float: left; width: 94%;}
		.title{color:#949494;font-size:14px;border-bottom;1px solid #949494;}
		.goods{margin-top:3%; margin-left: 1%; width: 98%; padding-top: 15px; padding-bottom: 20px; border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;font-size:14px; height: 50px;}
		.goods img{padding-left:2%;width:16%;}
		.goods span{color:#F06673;}
		.lianxi{font-size:14px; line-height: 30px; margin-top: 10px;}
		.lianxi input{border:1px solid #949494;background-color:white; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
		.redstar{color:red}
		.peisong{padding:3%;padding-top:1%;font-size:14px; margin-bottom: 100px; float: left; width: 94%;}
		.select{padding-left:3%;padding-right:3%;margin-top:1%}
		.button{list-style-type:none;background-color:#EFEFEF;color:#4B4B4B;width:48%;height:35px;float:left;text-align:center;line-height:35px;border:0px;font-size:14px}
		.infos{border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;padding:1%}
		.mendian{padding:1%; line-height: 30px;}
		.btn1{background-color:#FFAB00; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;color:white;width:100%;height:30px;margin-top:3px;text-align:center;line-height:230%}
		.btn2{background-color:#F06673; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;color:#fff;width:100%;height:30px;margin-top:3px;text-align:center;line-height:230%}
		.fukuan{padding:1%; line-height: 30px;}
		.price{color:#FF6B0C}
		a:link,a:visited,a:hover,a:active{text-decoration: none;color: black;}
		.clearfix:after {content: " ";display: block;clear: both;height: 0;}
		.clearfix {zoom: 1;}
		.address select,.address input{border:1px solid #949494;background-color:white; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;margin-top:1%}
		.address select{width:28.5%;height:25px;margin-top:3%}
		.address input{width:97%;height:25px;margin-bottom:4%;margin-top:3%}
        
        
        .container{ width: 100%; position: relative;}
        .als-wrapper{ width: 100%;}
        .als-viewport{ width:320px;}
        .als-item{ width: 70px;height: 70px;}
        .als-item img{width: 59px;}
        .als-prev{position: absolute; left: 5px; z-index: 99; top: 20px; display: none;}
        .als-next{position: absolute; right: 5px; z-index: 99; top: 20px;display: none;}
        .als-prev img{ width: 7.5px; height: 11px;}
        .als-next img{ width: 7.5px; height: 11px;}
        .numjian{ float: right;}
        .numjian span{ color: #F06673;}
    </style>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script src="js/datedropper.min.js"></script>
    <script src="js/timedropper.min.js"></script>
</head>
<body>
    <div class="top">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        确认订单
    </div>
    <div class="info">
    	<div class="title">订单信息<div class="numjian">共<span>5</span>件</div></div>
       
        <div class="goods">
           
           
           
           
<div class="container">


<section id="content">
			
		<div class="als-container3" id="demo3">
            <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
			  <div class="als-viewport">
			    <ul class="als-wrapper">
			      <li class="als-item"><a href="#"><img src="images/order/ddqr_img01.png"/><span>x11</span></a></li>
			      <li class="als-item"><a href="#"><img src="images/order/ddqr_img02.png"/><span>x11</span></a></li>
			      <li class="als-item"><a href="#"><img src="images/order/ddqr_img03.png"/><span>x11</span></a></li>
			      <li class="als-item"><a href="#"><img src="images/order/ddqr_img04.png"/><span>x11</span></a></li>
			      <li class="als-item"><a href="#"><img src="images/order/ddqr_img01.png"/><span>x11</span></a></li>
			      
			    </ul>
			  </div>
            <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
			</div>
        </section>
	</div>
           
            
            
            
           
        </div>
        <div class="lianxi">
        	<span class="right"><span class="redstar">*</span>联系人：</span><span>邹小姐</span><br>
            <span class="right"><span class="redstar">*</span>联系电话：</span><span>15900005001</span><br>
            <span class="right"><span class="redstar">*</span>配送日期：</span><input type="text" class="input" id="pickdate" /><br>
            <span class="right"><span class="redstar">*</span>配送时间：</span><input type="text" class="input" id="picktime" /><br>
        </div>
    <script>
		$("#pickdate").dateDropper({
			animate: false,
			format: 'Y-m-d',
			maxYear: '2020'
		});
		$("#picktime").timeDropper({
			meridians: false,
			format: 'HH:mm',
		});
    </script>
    </div>
    <div class="peisong">
    	<div class="title">配送方式</div>
        <div class="select clearfix">
        	<a href="javascript:btn(1)"><div class="button" id="chuli" style="background-color:#CCCCCC;color:#4B4B4B;">门店自提</div></a>
            <a href="javascript:btn(2)"><div class="button" id="wancheng" style="margin-left:10px">送货上门</div></a>
        </div>
            <script>
				function btn(val){
					var chuli = document.getElementById('chuli');
					var wancheng = document.getElementById('wancheng');
					var info1 = document.getElementById('info1');
					var info2 = document.getElementById('info2');
					if(val == 1){
						info1.style.display='block';
						info2.style.display='none';
						chuli.style.backgroundColor='#CCCCCC';
						chuli.style.color='#4B4B4B';
						wancheng.style.backgroundColor='#EFEFEF';
						wancheng.style.color='#4B4B4B';
					} else {
						info1.style.display='none';
						info2.style.display='block';
						chuli.style.backgroundColor='#EFEFEF'
						chuli.style.color='#4B4B4B';
						wancheng.style.backgroundColor='#CCCCCC';
						wancheng.style.color='#4B4B4B';
					}
				}
    		</script>
        <div class="infos">
        	<div id="info1">
                <div class="title">门店信息</div>
                <div class="mendian">
                    <span>门店：</span><span>阪急店</span><br>
                    <span>地址：</span><span>高雄市前镇区中华五路789号2F</span><br>
                    <span>电话：</span><span>07-822 0300</span><br>
                    <a href="mendian.html"><div class="btn1">提货门店选择</div></a>
                </div>
            </div>
            <div id="info2" style="display:none">
                <div class="title">配送地址</div>
                <div class="address">
                    <select id="province">
                        <option style="width:200px">省</option>
                        <option style="width:200px">2</option>
                        <option style="width:200px">3</option>
                        <option style="width:200px">4</option>
                        <option style="width:200px">5</option>
                    </select>
                    -
                    <select id="city">
                        <option style="width:200px">市</option>
                        <option style="width:200px">2</option>
                        <option style="width:200px">3</option>
                        <option style="width:200px">4</option>
                        <option style="width:200px">5</option>
                    </select>
                    -
                    <select id="district">
                        <option style="width:200px">区</option>
                        <option style="width:200px">2</option>
                        <option style="width:200px">3</option>
                        <option style="width:200px">4</option>
                        <option style="width:200px">5</option>
                    </select><br/>
                    <input type="text" placeholder="详细地址">
                </div>
            </div>
            <div class="title">付款信息</div>
            <div class="fukuan">
            	<span>商品金额：</span><span class="price">68.00</span><br>
                <span>配送费用：</span><span class="price">10.00</span><br>
                <span>应付合计：</span><span class="price">78.00</span><br>
                <a href=""><div class="btn2">微信支付</div></a>
            </div>
        </div>
    </div>
        <div class="foot">
        <ul>
            <li>
                <div class="img"><a href="index.html"><img src="images/index_botmenu01off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="flow.html"><img src="images/index_botmenu02off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="user_order_list.html"><img src="images/index_botmenu03off.png" alt=""></a></div>
            </li>
        </ul>
    </div>
    
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.als-1.7.min.js"></script>
	<script type="text/javascript">
        var li=$(".als-wrapper li").length;
        var scrolling_items=0;
        if(li>4){
            li=4;
            scrolling_items=1;
            $(".als-prev").show();
            $(".als-next").show();
        
        }
        
		$(document).ready(function() 
		{
		
				$("#demo3").als({
				visible_items:li,
				scrolling_items: scrolling_items,
				orientation: "horizontal",
				circular: "yes",
				autoscroll: "no",
				start_from: 0
			});
			
		});
	</script>
</body>
</html>